<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid布局</title>
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr ; /*每一行显示多少个*/
      grid-template-rows: 100px 100px;
      grid-gap: 10px;
    }
    .wrapper > div {
      background-color: #a5a5a5;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
  <div class="box6">Six</div>
</div>
</body>
</html>